<template>
  <div class="container">
    <u-navbar
      class="custom-navbar"
      :title="pageTitle"
      :title-bold="false"
    ></u-navbar>
    <div class="content">
      <div class="content-card">
        <cell label="行程信息" :labelStyle="{ color: '#1A1A1AFF' }">
          <div class="view-btn-wrapper">
            <div class="view-btn" @click="onViewBtnClick">
              查看
            </div>
          </div>
        </cell>
      </div>
      <div class="search-wrap">
        <search @search="onSearch" placeholder="请输入服务商名称" />
      </div>
      <div class="provider-list">
        <scroll-view
          style="height: 100%"
          :scroll-top="scrollTop"
          scroll-y
          :scroll-with-animation="true"
          refresher-enabled
          :refresher-triggered="refreshStatus"
          :enable-back-to-top="true"
          @refresherrefresh="resetRefresh(true)"
          @scrolltolower="reachBottom"
        >
          <provider-item
            v-for="record in dataSource"
            :key="record.id"
            :record="record"
            :showDistributeBtn="!(currentProviderId == record.id)"
            @distribute="onDistributeClick"
          />
          <!-- 加载结束列表为空时展示 -->
          <view
            class="empty-wrap"
            v-if="dataSource.length == 0 && loadStatus == 'nomore'"
          >
            <image
              class="empty-image"
              mode="aspectFit"
              src="../static/images_qccx/empty.png"
            />
            <view class="empty-text">暂无数据</view>
          </view>
          <!-- 底部加载状态 -->
          <u-loadmore v-else margin-top="20" :status="loadStatus" />
        </scroll-view>
      </div>
    </div>
    <!-- 行程信息 -->
    <distributeInfoModal :orderInfo="orderInfo" ref="distributeInfoModalRef" />
  </div>
</template>
<script>
import { getOrderDetail } from "@/api/qccx";
import cell from "./components/cell.vue";
import search from "./components/search.vue";
import providerItem from "./components/provider-item.vue";
import distributeInfoModal from './components/distribute-info-modal.vue'
import ListMixin from "./mixins/listMixin.js";
import { debounce } from './utils/index.js'
export default {
  mixins: [ListMixin],
  data() {
    return {
      orderInfo: {},
      pageTitle: '订单分发',
      queryParam: {
        pageSize: 10,
        status: 1, // 启用状态
      },
      apiMethods: {
        list: "/qms/carProvider/getList",
      },
      isRegive: false, // 是否是重新分发
      currentProviderId: '', // 重新分发，当前已指派的服务商id
    };
  },
  components: {
    cell,
    search,
    providerItem,
    distributeInfoModal,
  },
  methods: {
    onViewBtnClick() {
      this.$refs.distributeInfoModalRef.show()
    },
    onSearch(keyword) {
      this.queryParam.nameLike = keyword
      // 清空查询
      if (keyword == '') {
        this.queryParam.businessTypeList = [2]
        this.queryParam.cityCode = this.orderInfo.cityCode;
      } else {
        delete this.queryParam.businessTypeList
        delete this.queryParam.cityCode
      }
      this.loadData(1)
    },
    onDistributeClick(providerInfo) {
      let url = `/pages_qccx/distribute-confirm?id=${this.orderInfo.id}&providerId=${providerInfo.id}`
      const isOnlineProvider = providerInfo.type == 5
      if (this.isRegive) {
        url += `&isRegive=${this.isRegive}`
      }
      if (isOnlineProvider) {
        url += `&isOnlineProvider=true`
      }
      uni.navigateTo({ url })
    }
  },
  onLoad(options) {
    const id = options.id;
    const isRegive = options.isRegive;
    this.isRegive = isRegive
    if (isRegive) {
      this.pageTitle = '订单重新分发'
    } else {
      this.pageTitle = '订单分发'
    }
    getOrderDetail({ id: id }).then((res) => {
      const result = res.result;
      this.orderInfo = result;
      this.queryParam.businessTypeList = [2]
      this.queryParam.cityCode = result.cityCode;
      this.queryParam.geOrderId = result.id;
      this.loadData(1);

      const providerOrder = this.orderInfo.providerOrder
      if (providerOrder) {
        // 当前的服务商id
        const providerId = providerOrder.providerId
        this.currentProviderId = providerId
      }
    });
    // onSearch 函数节流
    this.onSearch = debounce(this.onSearch, 300)
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
  .custom-navbar {
    flex-shrink: 0;
  }
  .content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 24rpx;
    .content-card {
      flex-shrink: 0;
      background: #ffffff;
      box-shadow: 0rpx 4rpx 60rpx 0rpx rgba(201, 205, 216, 0.1265);
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      padding: 24rpx 32rpx;
      .view-btn-wrapper {
        display: flex;
        justify-content: flex-end;
        .view-btn {
          width: 60rpx;
          height: 44rpx;
          line-height: 44rpx;
          font-size: 28rpx;
          color: #ff874f;
        }
      }
    }
    .search-wrap {
      margin: 24rpx 0;
      flex-shrink: 0;
    }
    .provider-list {
      flex: 1;
      overflow: hidden;
      .empty-wrap {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200rpx;
        margin-top: -168rpx;
        image {
          width: 400rpx;
          height: 260rpx;
        }
        .empty-text {
          height: 44rpx;
          font-size: 28rpx;
          color: #767676;
          line-height: 44rpx;
          margin-top: 32rpx;
        }
      }
    }
  }
}
</style>
